<template>
	<div class="index_mask black">
		<div class="detail_main_canvas_exit">
			<el-button type='primary' size='small' @click='toexit'>
				退出全屏
				<i class="el-icon-close"></i>
			</el-button>
		</div>
		<div class="detail_main_canvas_control center">
			<div class="detail_main_canvas_controlP2">
				<div class="detail_main_canvas_controlP3 like_btn" @click="changeScale(-1)">
					<img src="@/images/detail_main_canvas_controlP322.png" />
				</div>
				<div class="detail_main_canvas_controlP3 hover_active" @click="changeScale(1)">
					<img src="@/images/detail_main_canvas_controlP332.png" />
				</div>
				<div class="detail_main_canvas_controlP3 hover_active" @click="changeRotage">
					<img src="@/images/detail_main_canvas_controlP342.png" />
				</div>
			</div>
		</div>
		<div class="scaleshow" v-if="scaleshow">
			{{(selectArea.scale * 100).toFixed(0)}}%
		</div>
		<div class="detail_main_canvas_area" ref='detail_main_canvas_area' @wheel.prevent="mouseWhell($event)" @mousemove.stop="mousemoveBox($event)" @mouseup.stop="mouseupBox($event)">
			<img :src="baseurl + mindMap" v-if='mindMap' ref='detail_canvas_img' class="detail_canvas_img"  @load="loadover($event)" @mousedown.stop="mousedownBox($event)" id="thAreaAdd2" :style="getthAreaAdd2" />
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			mindMap: String,
		},
		data() {
			return {
				scaleshow: false,
				dragState: true,
				scalestep: 0.2,
				thAreaAdd2: {},
				selectArea: {
					x: 0,
					y: 0,
					scale: 1,
					rotate: 0
				},
			}
		},
		created() {

		},
		mounted() {

		},
		computed: {
			getthAreaAdd2() {
				return "left:" + this.selectArea.x + "px;top:" + this.selectArea.y + "px;transform:" + "scale(" + this.selectArea.scale + ") rotateZ(" + this.selectArea.rotate + "deg)"
			},
		},
		watch: {
			"selectArea.scale" () {
				this.scaleshow = true
				setTimeout(() => {
					this.scaleshow = false
				}, 1000)
			}
		},
		methods: {
			loadover(event) {
				this.$nextTick(() => {
					var width = this.$refs.detail_canvas_img.width;
					var Boxwidth = this.$refs.detail_main_canvas_area.offsetWidth;
					var height = this.$refs.detail_canvas_img.height;
					var Boxheight = this.$refs.detail_main_canvas_area.offsetHeight;
					this.selectArea.x = (Boxwidth - width) / 2
					this.selectArea.y = (Boxheight - height) / 2
				})
			},
			toexit() {
				this.$emit('toexit')
			},
			mouseWhell(event) {
				this.changeScale(event.deltaY)
			},
			changeScale(type) {
				if(type < 0) {
					this.selectArea.scale += this.scalestep
				} else {
					if(this.selectArea.scale <= 0.1) {
						return
					} else {
						this.selectArea.scale -= this.scalestep
					}
				}
			},
			changeRotage() {
				if(this.selectArea.rotate < 360) {
					this.selectArea.rotate += 90
				} else {
					this.selectArea.rotate = 90
				}
			},
			getArea() {
				var areaInfo = {
					imgLeft: $('#thAreaAdd2')[0].offsetLeft,
					imgTop: $('#thAreaAdd2')[0].offsetTop,
					originalWidth: $('#thAreaAdd2').width(),
					originalHeight: $('#thAreaAdd2').height(),
					pageX: '',
					pageY: '',
					moveable: false,
				}
				this.$set(this, 'thAreaAdd2', areaInfo)
			},
			mousedownBox(event) {
				if(!this.dragState) {
					return
				}
				this.getArea(name);
				this.thAreaAdd2.pageX = event.pageX;
				this.thAreaAdd2.pageY = event.pageY;
				this.thAreaAdd2.moveable = true;
			},
			mousemoveBox(event) {
				if(!this.dragState) {
					return
				}
				if(this.thAreaAdd2.moveable) {
					var left = this.thAreaAdd2.imgLeft + (event.pageX - this.thAreaAdd2.pageX);
					var top = this.thAreaAdd2.imgTop + (event.pageY - this.thAreaAdd2.pageY);
					this.selectArea.x = left;
					this.selectArea.y = top;
				}
			},
			mouseupBox(event, name) {
				this.thAreaAdd2.moveable = false;
			},
			changeDrag() {
				this.dragState = !this.dragState
			},
		},
	}
</script>